// 获取员工的简单列表
import {
  getEmployeeSimple
} from '@/api/employees'

//获取组织架构的数据  addDepartments新增部门接口 根据ID查询部门详情getDeparDetail 编辑接口updateDepartments
import {
  getDepartments,
  addDepartments,
  getDeparDetail,
  updateDepartments
} from "@/api/departments";
export default {
  name: "HrsaasAddDept",
  // 需要传一个 props 变量来控制 显示 或者隐藏
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    // 接受父组件传递过来的数据
    treeNode: {
      type: Object,
      default: null,
    },
  },
  components: {},
  directives: {},
  data() {
    // 检查 部门名称 是否重复
    // 现在定义一个函数 这个函数的目的是 去找 同级部门下 是否有重复的部门名称
    const checkNameRepeat = async (rule, value, callback) => {
      // 先要获取最新的组织架构数据
      const { depts  } = await getDepartments();
        let isRepeat = false
        if (this.formData.id) {
            // 判断有没有id 有id就是编辑模式
            // 找到当前不包含我的pid
            isRepeat= depts.filter(item => item.pid === this.treeNode.pid && item.id !==this.treeNode.id).some(item=>item.name===vulue)

        } else {
            // 没有id 就是新增模式
            isRepeat = depts
            .filter((item) => item.pid === this.treeNode.id)
            .some((item) => item.name === value);
        }
      // depts是所有的部门数据
      // 如何去找技术部所有的子节点
      
      isRepeat ?  callback(new Error(`同级部门下已经有${value}的部门了`)) : callback();
    };

    // 检查编码重复
    const checkCodeRepeat = async (rule, value, callback) => {
      // 先要获取最新的组织架构数据
        const { depts } = await getDepartments();
        let isRepeat = false
        if (this.formData.id) {
             // 判断有没有id  有id就是编辑模式
            // 把自己排除掉然后进行比较
             isRepeat = depts.filter(item=>item.id !==this.treeNode.id).some((item) => item.code === value && value);
        } else {
              // 没有id 就是新增模式
              isRepeat = depts.some((item) => item.code === value && value); 
        }
      // 这里加一个 value不为空 因为我们的部门有可能没有code
      isRepeat ?  callback(new Error(`组织架构中已经有部门使用${value}编码`)) : callback();
    };
    return {
      // dialogVisible: true,
      formData: {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      },
      // 定义校验规则
      rules: {
        name: [{
            required: true,
            message: "部门名称不能为空",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "部门名称要求1-50个字符",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: checkNameRepeat
          }, //自定义函数的验证规则
        ],
        code: [{
            required: true,
            message: "部门编码不能为空",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "部门编码要求1-50个字符",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: checkCodeRepeat
          },
        ],
        manager: [{
          required: true,
          message: "部门负责人不能为空",
          trigger: "blur"
        }, ],
        introduce: [{
            required: true,
            message: "部门介绍不能为空",
            trigger: "blur"
          },
          {
            trigger: "blur",
            min: 1,
            max: 300,
            message: "部门介绍要求1-50个字符",
          },
        ],
      },

      peoples: [], //接受获取员工简单列表的数据
    };
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },
  mounted() {},
  methods: {
    //   获取详情的方法
    async getDeparDetail(id) {
      // 因为我们是父组件调用了子组件的方法 先设置了 node 数据 直接调用方法
      // props 传值是异步的
      this.formData = await getDeparDetail(id)
    },
    // 获取员工简单列表的数据
    async getEmployeeSimple() {
      this.peoples = await getEmployeeSimple()
    },
    //   点击确定
    btnOk() {
      //   alert('11')
      //   通过ref 完成表单的预验证
      this.$refs.deptForm.validate(async isOk => {
          if (isOk) {
            // 判断是否有id 有id进入编辑模式 没有id是新增模式
            if (this.formData.id) {
                await updateDepartments(this.formData)
            } else {
                await addDepartments({
                    ...this.formData,
                    pid: this.treeNode.id
                  }) //调用接口 添加父部门的id
            }
          //   addDepartments（这里接受5个参数...this.formData 
          //这里解构之后有4个参数 this.treeNode.id当前点击的节点的id 就是添加子部门的pid ）
         
          //   告诉父组件更新数据
          this.$emit('addDepts') //触发一个自定义事件
          //添加成功关闭弹出层 此时应修改showDialog的值
          //   this.$emit('update:showDialog',false)告诉父组件把showDialog的值改为false
          // update:props名称
          this.$emit('update:showDialog', false)
          //关闭dialog的时候 会触发el-dialog 的close事件 这里不需要在单独的重置数据了

        }
      })

    },
    //   点击取消 清除表单的预验证 关闭弹出层
    btnCancel() {
      this.formData = {
          name: "", // 部门名称
          code: "", // 部门编码
          manager: "", // 部门管理者
          introduce: "", // 部门介绍
        },
        this.$emit('update:showDialog', false) //关闭弹出层
      //   清除表单的验证
      this.$refs.deptForm.resetFields()
    }
  },
};
